<template>
  <div class="app-container">
    <div class="top">
      <topBanner class="left" :title="getUser" :weatherData="weatherData" :nums="nums" />
      <div class="right">
        <div class="box">
          <div class="title">欢迎使用全新的OA</div>
          <div class="tip">查看引导手册</div>
          <img src="@/assets/images/h_r.png" class="r_image" />
        </div>
      </div>
    </div>
    <div class="container">
      <div class="left">
        <cygn class="cygn" title="常用功能"></cygn>
        <pending_approval class="dsp" title="我的待审批事务" :tableData="approvalList" @Reflush="getscroll"></pending_approval>
        <!-- <div class="other"></div> -->
      </div>
      <div class="right">
        <schedule class="rcap" title="日历"></schedule>
        <announcement class="gg" title="公告" :newsList="newsList"></announcement>
      </div>
    </div>
  </div>
</template>
<script>
import task from "@/api/workflow/task";
import { getWeather, getSunrise } from "@/api/weather/weather";
import topBanner from "@/views/homePage/components/topBanner";
import cygn from "@/views/homePage/components/cygn.vue";
import pending_approval from "@/views/homePage/components/pending_approval";
import schedule from "@/views/homePage/components/schedule";
import announcement from "@/views/homePage/components/announcement";
import {listNotice} from "@/api/system/notice";
export default {
  name: "viewIndex",
  dicts: ["act_status", "purchase_type"],
  data() {
    return {
      userName: this.$store.getters.nickName,
      weatherData: {},
      approvalList: [],
      newsList: [
      ],
      nums:{
        FinishSize:null,
        messageSize:null,
        waitSize:null
      }
    };
  },
  computed: {
    getUser(){
      return this.$store.state.user.nickName+"，欢迎您"
    }
  },

  components: {
    topBanner,
    cygn,
    schedule,
    announcement,
    pending_approval
  },
  created() {},
  mounted() {
    this.getWeather();
    this.getscroll();
    listNotice().then(response=>{
      this.newsList=response.rows;
    })
  },
  watch: {},
  methods: {
    getWeather() {
      getWeather("320105").then(response => {
        this.weatherData = response.data;
      });
    },
    getscroll() {
      task.getscroll().then(response => {
        this.approvalList = response.data.scrollWaitList;
        this.nums.FinishSize= response.data.FinishSize;
        this.nums.messageSize= response.data.messageSize;
        this.nums.waitSize= response.data.waitSize
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
  padding: 0.125rem;
  overflow: hidden;
  background: #edefef;
  letter-spacing: 0.02rem;
  .top {
    width: 100%;
    height: 1.75rem;
    margin-bottom: 0.125rem;
    display: flex;
    .left {
      width: 70%;
      height: 100%;
      margin-right: 0.125rem;
      background-color: #ffffff;
    }
    .right {
      width: calc(30% - 0.125rem);
      height: 100%;
      background-color: #ffffff;
      padding: 0.2rem;
      .box {
        border-radius: 0.125rem;
        height: 100%;
        background-color: #f3f6fa;
        position: relative;
        .title {
          margin-left: 0.4rem;
          padding-top: 0.25rem;
          padding-bottom: 0.15rem;
          font-size: 0.25rem;
          font-weight: 700;
        }
        .tip {
          cursor: pointer;
          margin-left: 0.4rem;
          background-color: #233188;
          color: #ffffff;
          font-weight: 700;
          font-size:0.175rem;
          padding: 0.075rem;
          width: 1.5rem;
          text-align: center;
        }
        .r_image {
          position: absolute;
          top: 0;
          right: 0.35rem;
          height: 110%;
        }
      }
    }
  }
  .container {
    width: 100%;
    height: calc(100vh - 2.125rem - 1.05rem);
    // background-color: #9b9f17;
    display: flex;
    .left {
      width: 70%;
      height: 100%;
      margin-right: 0.125rem;
      .cygn {
        width: 100%;
        height: 1.75rem;
        margin-bottom: 0.125rem;
        background-color: #ffffff;
      }
      .dsp {
        width: 100%;
        height: calc(100% - 1.875rem);
        // margin-bottom: 0.125rem;
        background-color: #ffffff;
      }
      // .other {
      //   width: 100%;
      //   height: 1.75rem;
      //   // margin-bottom: 1.75rem;
      //   background-color: #d1729b;
      // }
    }
    .right {
      width: calc(30% - 0.125rem);
      height: 100%;
      // background-color: #44179f;
      .rcap {
        width: 100%;
        height: calc(100% - 2.925rem);
        margin-bottom: 0.125rem;
        background-color: #ffffff;
      }

      .gg {
        width: 100%;
        height: 2.8rem;
        // margin-bottom: 1.75rem;
        background-color: #ffffff;
      }
    }
  }
}

/* 设置滚动条宽度和高度 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px; /* 横向滚动条 */
  height: 8px; /* 纵向滚动条 必写 */
}
/* 设置滚动条样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #dde;
  border-radius: 3px;
}
#selectForm >>> .el-form-item__label {
  font-size: 12px;
}
::v-deep .bjsm .el-form-item__content{
  width: calc(100% - 130px) !important;
}
</style>
